<template>
  <div class="sidebar">
    <!-- 侧边栏头部，包含用户信息界面与开通黑胶会员 -->
    <SidebarHeader :headerArr="headerArr" />
    <!-- 侧边栏主体，一系列系统设置 -->
    <SidebarContent v-for="v in contentArr" :key="v.contentid" :arr="v" />
    <!-- <button>关闭云音乐</button> -->

    <van-cell is-link @click="showPopup">
      <button>退出登录/关闭</button>
    </van-cell>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%', width: '100%' }"
      get-container="body"
      z-index="9999"
    >
      <p>退出登录/关闭</p>
      <span>关闭云音乐</span><br />
      <span>退出云音乐登录</span>
    </van-popup>
  </div>
</template>
<script>
import SidebarHeader from "../components/Sidebar/SidebarHeader.component.vue";
import SidebarContent from "../components/Sidebar/SidebarContent.component.vue";
export default {
  components: {
    SidebarHeader,
    SidebarContent,
  },
  data() {
    return {
      headerArr: {
        headurl: "/img/wallhaven-rdyezm_看图王.jpg",
        username: "邓紫棋的头号粉丝",
        userid: 10000,
      },
      contentArr: [
        {
          contentid: 10086,
          title: "",
          content: [
            {
              oneclass: "iconfont icon-duanxin",
              span: "我的消息",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-duanxin",
              span: "云贝中心",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-chuangzuozhezhongxin_52",
              span: "创作者中心",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 100877,
          title: "音乐服务",
          content: [
            {
              oneclass: "iconfont icon-piao",
              span: "云村有票",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-gouwuche",
              span: "商城",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-cailing",
              span: "游戏专区",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-cailing",
              span: "口袋彩铃",
              p: "音乐和奶茶更配哦",
              img: "/img/wallhaven-rdyezm_看图王.jpg",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 10088,
          title: "其他",
          content: [
            {
              oneclass: "iconfont icon-shezhi",
              span: "设置",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-yueliang",
              span: "夜间模式",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-danchuang_dingshiguanbi_",
              span: "定时关闭",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-gexingzhuangban1",
              span: "个性装扮",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-kefu",
              span: "边听边存",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-zaixiantinggemianliuliang",
              span: "在线听歌免流量",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-Shape",
              span: "音乐黑名单",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-anquan1",
              span: "青少年模式",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-yinlenaozhong",
              span: "音乐闹钟",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 10087,
          title: "",
          content: [
            {
              oneclass: "iconfont icon-dingdan",
              span: "我的订单",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-youhuiquan",
              span: "优惠券",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-kefu",
              span: "我的客服",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-fenxiang",
              span: "分享网易云音乐",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-guanyuwomen",
              span: "关于",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
      ],
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
.sidebar {
  width: 100%;
  padding: 0.3rem 0.3rem 0.55rem;
  background-color: #f6f6f6 !important;
  z-index: 9999;
  /*隐藏滚动条*/
  ::-webkit-scrollbar {
    width: 0;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  button {
    width: 100%;
    border-radius: 0.2rem;
    height: 1rem;
    font-size: 0.26rem;
    color: #d21f2d;
    border: 0;
    background-color: #fffffe;
  }
}
</style>